<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
		<title>Calendar</title>
		<style>
			#loader {
				transition: all .3s ease-in-out;
				opacity: 1;
				visibility: visible;
				position: fixed;
				height: 100vh;
				width: 100%;
				background: #fff;
				z-index: 90000
			}
			
			#loader.fadeOut {
				opacity: 0;
				visibility: hidden
			}
			
			.spinner {
				width: 40px;
				height: 40px;
				position: absolute;
				top: calc(50% - 20px);
				left: calc(50% - 20px);
				background-color: #333;
				border-radius: 100%;
				-webkit-animation: sk-scaleout 1s infinite ease-in-out;
				animation: sk-scaleout 1s infinite ease-in-out
			}
			
			@-webkit-keyframes sk-scaleout {
				0% {
					-webkit-transform: scale(0)
				}
				100% {
					-webkit-transform: scale(1);
					opacity: 0
				}
			}
			
			@keyframes sk-scaleout {
				0% {
					-webkit-transform: scale(0);
					transform: scale(0)
				}
				100% {
					-webkit-transform: scale(1);
					transform: scale(1);
					opacity: 0
				}
			}
		</style>
		<link href="/ui/default/default.css" rel="stylesheet">
	</head>

	<body class="app">
		<div id="loader">
			<div class="spinner"></div>
		</div>
		<script>
			window.addEventListener('load', () => {
				const loader = document.getElementById('loader');
				setTimeout(() => {
					loader.classList.add('fadeOut');
				}, 300);
			});
		</script>
		<div>
			<main class="main-content bgc-grey-100">
				<div id="mainContent">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-4">
								<div class="bdrs-3 ov-h bgc-white bd">
									<div class="bgc-deep-purple-500 ta-c p-30">
										<h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
										<h3 class="c-white">Monday</h3></div>
									<div class="pos-r"><button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning"><i class="ti-plus"></i></button>
										<ul class="m-0 p-0 mT-20">
											<li class="bdB peers ai-c jc-sb fxw-nw">
												<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
													<div class="peer mR-15"><i class="fa fa-fw fa-clock-o c-red-500"></i></div>
													<div class="peer"><span class="fw-600">All Day Event</span>
														<div class="c-grey-600"><span class="c-grey-700">Nov 01 - </span><i>Website Development</i></div>
													</div>
												</a>
												<div class="peers mR-15">
													<div class="peer">
														<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5"><i class="ti-pencil"></i></a>
													</div>
													<div class="peer">
														<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5"><i class="ti-trash"></i></a>
													</div>
												</div>
											</li>
											<li class="bdB peers ai-c jc-sb fxw-nw">
												<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
													<div class="peer mR-15"><i class="fa fa-fw fa-clock-o c-blue-500"></i></div>
													<div class="peer"><span class="fw-600">All Day Event</span>
														<div class="c-grey-600"><span class="c-grey-700">Nov 01 - </span><i>Website Development</i></div>
													</div>
												</a>
												<div class="peers mR-15">
													<div class="peer">
														<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5"><i class="ti-pencil"></i></a>
													</div>
													<div class="peer">
														<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5"><i class="ti-trash"></i></a>
													</div>
												</div>
											</li>
											<li class="bdB peers ai-c jc-sb fxw-nw">
												<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
													<div class="peer mR-15"><i class="fa fa-fw fa-clock-o c-indigo-500"></i></div>
													<div class="peer"><span class="fw-600">All Day Event</span>
														<div class="c-grey-600"><span class="c-grey-700">Nov 01 - </span><i>Website Development</i></div>
													</div>
												</a>
												<div class="peers mR-15">
													<div class="peer">
														<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5"><i class="ti-pencil"></i></a>
													</div>
													<div class="peer">
														<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5"><i class="ti-trash"></i></a>
													</div>
												</div>
											</li>
											<li class="bdB peers ai-c jc-sb fxw-nw">
												<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
													<div class="peer mR-15"><i class="fa fa-fw fa-clock-o c-green-500"></i></div>
													<div class="peer"><span class="fw-600">All Day Event</span>
														<div class="c-grey-600"><span class="c-grey-700">Nov 01 - </span><i>Website Development</i></div>
													</div>
												</a>
												<div class="peers mR-15">
													<div class="peer">
														<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5"><i class="ti-pencil"></i></a>
													</div>
													<div class="peer">
														<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5"><i class="ti-trash"></i></a>
													</div>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-md-8">
								<div id="full-calendar"></div>
							</div>
						</div>
						<div class="modal fade" id="calendar-edit">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="bd p-15">
										<h5 class="m-0">Add Event</h5></div>
									<div class="modal-body">
										<form>
											<div class="form-group"><label class="fw-500">Event title</label> <input class="form-control bdc-grey-200"></div>
											<div class="row">
												<div class="col-md-6"><label class="fw-500">Start</label>
													<div class="timepicker-input input-icon form-group">
														<div class="input-group">
															<div class="input-group-addon bgc-white bd bdwR-0"><i class="ti-calendar"></i></div><input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"></div>
													</div>
												</div>
												<div class="col-md-6"><label class="fw-500">End</label>
													<div class="timepicker-input input-icon form-group">
														<div class="input-group">
															<div class="input-group-addon bgc-white bd bdwR-0"><i class="ti-calendar"></i></div><input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker"></div>
													</div>
												</div>
											</div>
											<div class="form-group"><label class="fw-500">Event title</label> <textarea class="form-control bdc-grey-200" rows="5"></textarea></div>
											<div class="text-right"><button class="btn btn-primary cur-p" data-dismiss="modal">Done</button></div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
		<script type="text/javascript" src="/ui/js/vendor.js"></script>
		<script type="text/javascript" src="/ui/js/bundle.js"></script>
	</body>

</html>